import { computed, defineComponent, Ref, ref, StyleValue, watch } from 'vue';
import {
  getEditorEmits,
  getColorPickerProps,
  useNamespace,
} from '@ibiz-template/vue3-util';
import './ibiz-color-picker.scss';
import { ColorPickerEditorController } from '../color-picker-editor.controller';

export const IBizColorPicker = defineComponent({
  name: 'IBizColorPicker',
  props: getColorPickerProps<ColorPickerEditorController>(),
  emits: getEditorEmits(),
  setup(props, { emit }) {
    const ns = useNamespace('color-picker');

    const c = props.controller;

    const currentVal = ref<string | null>('');

    const colorPicker: Ref<null | IData> = ref(null);

    const predefineColors = ref([
      '#000000',
      '#2C2C2C',
      '#50555C',
      '#ACB3BF',
      '#D0D3D9',
      '#C4C4C4',
      '#DADADA',
      '#E5E5E5',
      '#F0F0F0',
      '#F24E1E',
      '#E99C58',
      '#FFC700',
      '#FF4D00',
      '#FF00D6',
      '#D82E57',
      '#8E1DE8',
      '#0ACF83',
      '#18A0FB',
      '#A259FF',
      '#907CFF',
    ]);

    // 是否显示表单默认内容
    const showFormDefaultContent = computed(() => {
      if (
        props.controlParams &&
        props.controlParams.editmode === 'hover' &&
        !props.readonly
      ) {
        return true;
      }
      return false;
    });

    watch(
      () => props.value,
      (newVal, oldVal) => {
        if (newVal !== oldVal) {
          if (!newVal) {
            currentVal.value = '';
          } else {
            currentVal.value = newVal;
          }
        }
      },
      { immediate: true },
    );

    const handleChange = (e: string | null) => {
      emit('change', e);
    };

    const showPicker = (_e: Event) => {
      // element-plus源码里有100延时，必须在之后打开
      setTimeout(() => {
        if (colorPicker.value) {
          colorPicker.value.show();
        }
      }, 200);
    };

    const contentStyle = computed(() => {
      if (c.style) {
        return c.style;
      }
      return null;
    });

    // 聚焦
    const onFocus = (e: IData) => {
      emit('focus', e);
    };

    // 失焦
    const onBlur = (e: IData) => {
      emit('blur', e);
    };

    return {
      ns,
      c,
      currentVal,
      predefineColors,
      contentStyle,
      colorPicker,
      handleChange,
      showPicker,
      onFocus,
      onBlur,
      showFormDefaultContent,
    };
  },
  render() {
    let content = null;
    if (this.readonly) {
      // 只读显示
      content = `${this.currentVal}`;
    } else {
      // 编辑态显示
      content = (
        <span
          class={this.ns.b('content')}
          style={this.contentStyle as StyleValue}
          onClick={this.showPicker}
        >
          <el-color-picker
            ref='colorPicker'
            v-model={this.currentVal}
            disabled={this.disabled}
            onChange={this.handleChange}
            onBlur={this.onBlur}
            onFocus={this.onFocus}
            size='small'
            predefine={this.predefineColors}
            show-alpha
            {...this.$attrs}
          ></el-color-picker>
          <span class={this.ns.b('text')}>{this.currentVal}</span>
        </span>
      );
    }

    return (
      <div
        class={[
          this.ns.b(),
          this.disabled ? this.ns.m('disabled') : '',
          this.readonly ? this.ns.m('readonly') : '',
          this.ns.is('show-default', this.showFormDefaultContent),
        ]}
        style={{ color: this.currentVal || '' }}
      >
        {content}
      </div>
    );
  },
});
